<template>
  <div class="classify_container">
    <van-search v-model="value" placeholder="请输入搜索关键词" />
    <van-row>
      <van-col span="6">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item title="所有分类" @click="all" />
          <van-sidebar-item title="居家" @click="home" />
          <van-sidebar-item title="配件装饰" @click="decorate" />
          <van-sidebar-item title="服装" @click="clothing" />
          <van-sidebar-item title="电器" @click="appliance" />
        </van-sidebar>
      </van-col>
      <van-col span="18">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in image" :key="index">
            <img :src="item" alt="" width="100%" />
          </van-swipe-item>
        </van-swipe>

        <van-grid>
          <van-grid-item
            :icon="item.icon"
            :text="item.name"
            v-for="item in classifys"
            :key="item.id"
            @click="goclassifyshop(item.id)"
          />
        </van-grid>
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      activeKey: 0,
      classify: [],
      classifys: [],
      image: [
        require("../assets/image/1.jpg"),
        require("../assets/image/2.jpg"),
        require("../assets/image/3.jpg"),
        require("../assets/image/4.jpg"),
      ],
    };
  },
  mounted() {
    this.$API.getclassify().then((res) => {
      console.log(res);
      this.classify = res.data.data;
      this.classifys = res.data.data;
    });
  },
  methods: {
    all() {
      this.classifys = this.classify;
    },
    home() {
      this.classifys = [];
      this.classify.forEach((item) => {
        if (item.type == "jujia2") {
          this.classifys.push(item);
        }
      });
      this.classifys = this.classifys;
    },
    decorate() {
      this.classifys = [];
      var sum = [];
      this.classify.forEach((item) => {
        if (item.type == "peishi2") {
          this.classifys.push(item);
        }
      });
      this.classifys = this.classifys;
    },
    clothing() {
      this.classifys = [];
      var sum = [];
      this.classify.forEach((item) => {
        if (item.type == "fuzhuang2") {
          this.classifys.push(item);
        }
      });
      this.classifys = this.classifys;
    },
    appliance() {
      this.classifys = [];
      var sum = [];
      this.classify.forEach((item) => {
        if (item.type == "dianqi2") {
          this.classifys.push(item);
        }
      });
      this.classifys = this.classifys;
    },
    goclassifyshop(id){
      this.$router.push({
        path:"/classifyshop",
        query:{
          id
        }
      })
    }
  },
};
</script>

<style scoped>
.classify_container {
  width: 100%;
  margin-bottom: 1rem;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  /* line-height: 150px; */
  text-align: center;
  /* background-color: #39a9ed; */
}
</style>